<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import genCodeTaskService from "@/service/GenCodeTaskService";
import PageBO from "@/domain/bo/PageBO";
import type GenCodeTaskVO from "@/domain/vo/GenCodeTaskVO";
import {useRouter} from "vue-router";
import MysqlTableColumnMapVO from "@/domain/vo/MysqlTableColumnMapVO";
import mysqlTableColumnMapService from "@/service/MysqlTableColumnMapService";
import InfoDialog from "@/views/code-gen/gen-table-col-map/mysql/InfoDialog.vue";

const router = useRouter();

onMounted(() => {
  //加载数据
  getTableData();
})

//========================== 列表逻辑 ==========================
const tableList = ref(new Array<MysqlTableColumnMapVO>);
const page = reactive(new PageBO());

function getTableData() {
  tableList.value.length = 0;
  mysqlTableColumnMapService.list(page)
      .then((res) => {
        page.convertFromList(res)
        res.list.forEach(item => {
          tableList.value.push(item)
        })
      });
}

function tableCurrentChange(value: number) {
  page.page = value;
  getTableData();
}

function tablePrevClock() {
  page.page -= 1;
  getTableData();
}

function tableNextClick() {
  page.page += 1;
  getTableData();
}


//========================== 事件 ==========================
const infoDialogVisible = ref(false);
const infoDialogInfoVO = ref(new MysqlTableColumnMapVO());

function delRow(row: GenCodeTaskVO) {
  genCodeTaskService.del([row.id]).then(
      (res) => {
        getTableData();
      }
  )
}

function add() {
  infoDialogInfoVO.value = new MysqlTableColumnMapVO();
  infoDialogVisible.value = true;
}

</script>
<template>
  <div>
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="add()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableList"
              stripe
              style="width: 100%">
      <el-table-column
          prop="dataType"
          label="属性类型">
      </el-table-column>
      <el-table-column
          prop="mapType"
          label="映射类型">
      </el-table-column>
      <el-table-column
          prop="remarks"
          label="备注信息">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template #default="scope">
          <el-button @click="delRow(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="pagination"
        :page-size="page.pageSize"
        layout="total,  prev, pager, next, jumper"
        :total="page.total"
        :default-page-size="20"
        :background="true"
        @current-change="tableCurrentChange"
        @prev-click="tablePrevClock"
        @next-click="tableNextClick"
    />
    <info-dialog
        :dialog-visible="infoDialogVisible"
        :data-source-info-v-o="infoDialogInfoVO"
        @close-after="infoDialogVisible = false"
        @save-after="getTableData"/>
  </div>
</template>
<style lang="scss" scoped>
.pagination {
  margin-top: 40px;
  justify-content: center;
}
</style>